<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>
  <script src="./lia/template-web.js"></script>
</head>

<body style="padding: 15px;">
  <!-- 添加图书的Panel面板 -->
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">添加新图书</h3>
    </div>
    <div class="panel-body form-inline">

      <form action="" id="book">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input type="text" class="form-control" name="bookname" id="iptBookname" placeholder="请输入书名">
        </div>

        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input type="text" class="form-control" name="author" id="iptAuthor" placeholder="请输入作者">
        </div>

        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input type="text" class="form-control" name="publisher" id="iptPublisher" placeholder="请输入出版社">
        </div>
        <button type="submit" id="btnAdd" class="btn btn-primary">添加</button>
      </form>



    </div>
  </div>


  <!-- 图书的表格 -->
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb"></tbody>
  </table>
  <!-- 创建一个模板引擎 -->
  <script type="text/html" id="tpl-book">
    {{each data}}
    <tr>
      <td>{{$value.id}}</td>
      <td>{{$value.bookname}}</td>
      <td>{{$value.author}}</td>
      <td>{{$value.publisher}}</td>
      <td><a href="javascript:;" class='del' data-id="{{$value.id}}">删除</a></td>
    </tr>
    {{/each}}
  </script>
  <script>
    $(function () {
      //渲染图书数据
      getBook()

      function getBook() {
        $.ajax({
          type: "get",
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          success: function (res) {
            if (res.status !== 200) {
              return alert('获取图书列表失败')
            }
            console.log(res);
            var htmlStr = template('tpl-book', res)
            $('#tb').html(htmlStr)
          }
        })
      }
      // --------------------------
      // 删除功能
      $('#tb').on('click', '.del', function () {
        if (confirm('确认删除此项？')) {
          var id = $(this).attr('data-id');
          $.get('http://www.liulongbin.top:3006/api/delbook', {
            id: id
          }, function (res) {
            if (res.status !== 200) {
              return alert('删除图书失败');
            }
            getBook();
          })
        }
      })

      //2 删除图书 
      //3 添加图书
      $('#book').on('submit', function (e) {
        //阻止表单的默认提交行为
        e.preventDefault();
        //收集数据
        var data = $(this).serialize();
        //通过这个方法产生了一个可以用于ajax的字符串
        // 使用ajax提交数据
        $.ajax({
          type: 'post',
          url: 'http://www.liulongbin.top:3006/api/addbook',
          data: data,
          success: function (res) {
            //判断是否成功
            if (res.status !== 201) {
              return alert('添加图书失败')
            }
            //重新渲染数据
            getBook();
            //清空表单项
          }
        })
      })
    })
  </script>

</body>

</html>